<template>
	<view class="main">
		<view class="maen">
			<u-navbar title="团队中心" :autoBack="true"  :placeholder="true" leftIconSize="20" :height="40" class="titleColor"
				:bgColor="state.bgColor" :leftIconColor="state.leftIconColor">
			</u-navbar>
			<view class="yu">
				<view class="yuLeft">
					<view class="title">
						我的余额
					</view>
					<view class="jiaGe">
						{{state.userData.money}}
					</view>
				</view>
				<view class="yuLeft">
					<view class="yutle" @click="sheep.$router.go('/pages/user/myBalance')">
						余额明细<image src="../../static/icon_more.png" mode=""></image>
					</view>
					<view class="tiJiao" @click="sheep.$router.go('/pages/user/withdrawal')">
						提现
					</view>
				</view>
			</view>
		</view>
		<view class="bgColor">
			<view class="ones" @click="sheep.$router.go('/pages/user/order?id=2')">
				<view class="tuimg">
					<image src="../../static/me_icon_dingdan@2x.png" mode=""></image>
				</view>
				<view class="dTitle">
					我的订单
				</view>
			</view>
			<view class="ones" @click="sheep.$router.go('/pages/user/groupCertification')" >
				<view class="tuimg">
					<image src="../../static/icon_ttrz@2x.png" mode=""></image>
				</view>
				<view class="dTitle">
					团体认证
				</view>
			</view>
			<view class="ones" @click="sheep.$router.go('/pages/index/message')">
				<view class="tuimg">
					<image src="../../static/notification-bing@2x.png" mode=""></image>
				</view>
				<view class="dTitle">
					消息中心
				</view>
			</view>
			<view class="ones" @click="sheep.$router.go('/pages/index/chat')">
				<view class="tuimg">
					<image src="../../static/icon_jiesan@2x.png" mode=""></image>
				</view>
				<view class="dTitle">
					解散团队
				</view>
			</view>
		</view>
		<view class="buc">
			团队成员
		</view>
		<scroll-view scroll-y="true" lower-threshold="80" @scrolltolower="getGoodsList" class="all_list">
			<view class="boes">
				<view class="block" v-for="item,index in state.list" :key="index"  @click="tlist(item.id)">
					<view class="img">
						<image :src="item.show_image" mode=""></image>
					</view>
					<view class="title">
						<span>{{item.title}}</span>
					</view>
					<view class="infos">
						{{item.name}}·{{item.age}}·{{item.height}}
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="bottoms" @click="fabu">
			<image src="../../static/vuebi.png" mode=""></image>发布新人
		</view>
		<!-- 温馨提示 -->
		<view class="tan" v-if="state.teamShow">
			<view class="wen">
				<view class="wenTitle">
					温馨提示
				</view>
				<view class="ticen">
					请先完成团体认证，审核通过后可发布新人
				</view>
				<view class="boten">
					<view class="shao" @click="state.teamShow=false">
						稍后操作
					</view>
					<view class="tuan"  @click="sheep.$router.go('/pages/user/groupCertification')">
						团体认证
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script setup>
	import {ref,reactive,} from 'vue';
	import sheep from '@/sheep';
	import {onLoad,onShow} from '@dcloudio/uni-app';
	const state = reactive({
		leftIconColor:'#fff',
		bgColor:'rgba(0,0,0,0)',
		document_images:'',//营业执照
		mobile:'',//联系电话
		company:'',//公司名称
		teamShow:false,
		userData:{},
		list:[],
		pageSize:10,
		page:1,
		hasMore:true,
		isLoad:false,
	});
	// onLoad((options) => {
	// 	getUser()
	// });
	onShow(()=>{
		getUser()
		newsDatas()
	})
	function fabu(){
		if(state.userData.auth_type!='3'){
			uni.showToast({
				title:"请先团体认证",
				icon:'none',
			})
			return false
		}
		uni.navigateTo({
			url:'/pages/user/information?type=2'
		})
	}
	function tlist(id){
		if(state.userData.auth_type!='3'){
			uni.showToast({
				title:"请先团体认证",
				icon:'none',
			})
			return false
		}
		uni.navigateTo({
			url:'/pages/index/detail?id='+id+'&type=2'
		})
	}
	function newsDatas(){
		state.page=1
		state.hasMore=true
		state.isLoad=false
		state.list=[]
		getGoodsList()
	}
	async function getGoodsList(){
		if(state.isLoad) return false
		if(!state.hasMore) return false
		state.isLoad=true
		const {code,data} = await sheep.$api.zqzApi.pushList({
			page:state.page,
			limit:state.pageSize,
		})
		if (code == 1) {
			let list = data.list
			let hasmore = list.length===state.pageSize
			list = state.list.concat(list)
			state.hasMore = hasmore
			state.list = list
			state.isLoad = false
			state.page = state.page+1
		}
	}
	async function getUser(){
		const {code,data} = await sheep.$api.user.userInfo({
			token:uni.getStorageSync('token'),
		})
		if(code=='1'){
			state.userData = data
			if(data.authentication!=3){
				state.teamShow=true
			}
		}
	}
	// 倒计时
	function getLeft(){
		uni.navigateBack({
			delta:1,//返回层数，2则上上页
		})
	}
</script>
<style  lang="scss">
	.tan{
		width: 100%;
		height: 100vh;
		background: rgba(0,0,0,0.4);
		position: fixed;
		top:0;
		left:0;
		z-index:9999;
		.wen{
			width:80%;
			margin:70% auto 0;
			background: #fff;
			border-radius: 24rpx;
			.wenTitle{
				width: 100%;
				text-align: center;
				line-height: 100rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #333333;
			}
			.ticen{
				width: calc(100% - 48rpx);
				padding:24rpx;
				text-align: center;
			}
			.boten{
			    width: 100%;
				overflow: hidden;
				line-height: 80rpx;
				border-top:1px solid #F3F6FA;
				display: flex;
				.shao{
					width: 49%;
					color:#999999;
					text-align: center;
					border-right:1px solid #F3F6FA;
				}
				.tuan{
					width: 49%;
					color:#1BDDD0;
					text-align: center;
					border-right:1px solid #F3F6FA;
				}
			}
		}
	}
	page {
		height: 100%;
		width: 100%;
		background-color: #F5F5F5;
		.main {
			height: 100%;
			width: 100%;
			// background-color: #F5F5F5;
			.maen{
				width: 100%;
				height: 380rpx;
				background: linear-gradient(135deg, #1BDDD0 0%, #1BDDD0 100%);
				.uni-page-head{
					background: rgba(0,0,0,0)!important;
					color: #fff!important;
					
					.titleColor{
						color:#fff;
					}
				}
				:deep(.u-navbar__content__title){
					color: #fff!important;
				}
			}
			.bgColor{
				width: calc(100% - 102rpx);
				margin: -30rpx auto;
				text-align: center;
				background: #fff;
				border-radius: 24rpx;
				padding:24rpx;
				display: flex;
				align-items:center;
				justify-content: space-between;
				.ones{
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
					.tuimg{
						image{
							width: 48rpx;
							height:48rpx;
						}
					}
				}
			}
			.all_list {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				justify-content: space-between;
				width:calc(100% - 64rpx);
				margin: 0 auto;
				background-color: #F5F5F5;
				height: calc(100% - 650rpx);
				.block {
					width: 47%;
					// height: 518rpx;
					background: #F8F8F8;
					border-radius: 24rpx;
					background-color: #fff;
					margin-bottom: 24rpx;
			        padding-bottom:12rpx;
					.img {
						width: 100%;
						height: 332rpx;
						border-radius: 24rpx 24rpx 0 0;
						overflow: hidden;
			
						image {
							width: 100%;
							height: 332rpx;
						}
					}
			
					.title {
						display: flex;
						align-items: center;
						margin: 20rpx 24rpx 4rpx;
			
						image {
							height: 32rpx;
							width: 32rpx;
						}
			
						span {
							font-size: 32rpx;
							color: #333333;
							font-family: PingFang SC-Bold, PingFang SC;
							font-weight: bold;
						}
					}
			
					.infos {
						font-size: 24rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #A5A5A5;
						margin: 4rpx 24rpx 12rpx;
					}
			
					.type {
						width: 128rpx;
						height: 42rpx;
						line-height: 42rpx;
						text-align: center;
						border-radius: 30rpx;
						font-size: 24rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #333333;
						margin-right: 8rpx;
						margin-left: 24rpx;
					}
				}
			}
			.bottoms{
				width: calc(100% - 48rpx);
				position: fixed;
				bottom:20rpx;
				left:24rpx;
				border-radius:54rpx;
				border:1px solid #333333;
				line-height: 92rpx;
				text-align: center;
				display: flex;
				justify-content: center;
				align-items: center;
				background: #fff;
				font-size: 32rpx;
				font-weight: bold;
				image{
					width: 48rpx;
					height:48rpx;
					margin-right: 10rpx;
				}
			}
			.yu{
				width: calc(100% - 64rpx);
				margin:0 auto 64rpx;
				color:#fff;
				padding-top: var(--status-bar-height);
				display: flex;
				justify-content: space-between;
				.yuLeft{
					.tiJiao{
						width: 150rpx;
						height:60rpx;
						line-height: 60rpx;
						color: #1BDDD0;
						text-align: center;
						background: #FFFFFF;
						border-radius:32rpx;
						margin-top: 20rpx;
					}
					.jiaGe{
						font-size: 48rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #FFFFFF;
						margin-top: 20rpx;
					}
					.title{
						font-size: 28rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #FFFFFF;
					}
					.yutle{
						display: flex;
						justify-content: center;
						align-items:center;
						color: #FFFFFF;
						font-size: 28rpx;
						image{
							width:40rpx;
							height:40rpx;
						}
					}
				}
			}
		}
		
		.butLi{
			width: calc(100% - 64rpx);
			margin:60rpx auto;
			background: #1BDDD0;
			font-size:32rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			line-height: 92rpx;
			text-align: center;
			border-radius: 54rpx;
		}
		.buc{
			width:calc(100% - 64rpx);
			margin: 20rpx auto;
			font-size: 28rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
			margin-top: 102rpx;
		}
		.duiHuan{
			width: calc(100% - 64rpx);
			margin:2 0rpx auto;
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #666666;
			line-height: 50rpx;
		}
   }
   .boes{width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between;}
</style>
